<template>
    <div class="select" style="font-size: 16px;">
        <ScrollNumber :val="val" />
    </div>
</template>
<script>
    import ScrollNumber from "./components/scrollNumber2.vue";

    export default {
        components: {
            ScrollNumber,
        },
        data() {
            return {
                val: 123456
            };
        },
        methods: {
            /**
             * formatNumber()
             * 将数值四舍五入后格式化.
             *
             * @param num 数值(Number或者String)
             * @param cent 要保留的小数位(Number)
             * @param isThousand 是否需要千分位 0:不需要, 1:需要(数值类型);
             * @return 格式的字符串,如'1,234,567.45'
             * @type String
             */
            formatNumber(num, cent, isThousand) {
                num = num.toString().replace(/\$|\,/g, "");
                if (isNaN(num)) num = "0";
                var sign = num == (num = Math.abs(num));
                num = parseFloat(num.toFixed(cent));
                num = num.toString();
                var cents;
                if (num.lastIndexOf(".") != -1) {
                    let index = num.lastIndexOf(".");
                    cents = num.substring(index + 1, num.length);
                } else {
                    cents = "";
                }
                num = Math.floor(num * Math.pow(10, cent) + 0.50000000001);
                num = Math.floor(num / Math.pow(10, cent)).toString();
                if (isThousand) {
                    for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
                        num = num.substring(0, num.length - (4 * i + 3)) + "," + num.substring(num.length - (4 * i + 3));
                }
                if (cent > 0) {
                    if (cents == "") {
                        return (sign ? "" : "-") + num;
                    } else {
                        return (sign ? "" : "-") + num + "." + cents;
                    }
                } else {
                    return (sign ? "" : "-") + num;
                }
            },
        },
        mounted() {
            setInterval(() => {
                this.val += 1
            }, 3000)
        }
    }

</script>

<style lang="less" scoped>
.select {
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>